<template>
    <div class="hide-debug" v-if="isShowDevModal">
        <el-dialog
            :visible.sync="isShowDevModal"
            width="50%"
            class="hide-debug-modal"
            title="开发人员模式（版本信息）"
        >
            <div class="debug-bg"></div>
            <el-tabs :v-model="tabs" :value="tabs" @tab-click="handleClick">
                <!-- 前端更新的版本信息 -->
                <template v-if=" JSON.stringify(project) !=='{}' ">
                    <el-tab-pane :label="project.title" icon="md-notifications-outline" name="project">
                        <div class="info-item" v-for="(info, i) in project.info">
                            <div class="info-title">
                                <h3>版本号：{{ info.version }}</h3>
                                <span>更新于 {{ info.date }}</span>
                            </div>
                            <div class="info-content">
                                <ul>
                                    <li
                                        v-for="(content, i) in info.content"
                                        :data-index="`【${(i+1)}】、`"
                                    >{{ content.des }}</li>
                                </ul>
                            </div>
                        </div>
                    </el-tab-pane>
                </template>
                <!-- 后端更新的版本信息（固定请求public/config/version.js） -->
                <!-- <template v-if=" JSON.stringify(server) !=='{}' ">
                    <el-tab-pane :label="server.title" icon="md-planet" name="server">
                        <div class="info-item" v-for="(info, i) in server.info">
                            <div class="info-title">
                                <h3>版本号：{{ info.version }}</h3>
                                <span>更新于 {{ info.date }}</span>
                            </div>
                            <div class="info-content">
                                <ul>
                                    <li
                                        v-for="(content, i) in info.content"
                                        :data-index="`【${(i+1)}】、`"
                                    >{{ content.des }}</li>
                                </ul>
                            </div>
                        </div>
                    </el-tab-pane>
                </template> -->
                <!-- 外网平台更新的版本信息（固定请求group.js） -->
                <el-tab-pane label="平台版本" icon="md-desktop" name="group">
                    <div class="info-item" v-for="(info, i) in group.info">
                        <div class="info-title">
                            <h3>版本号：{{ info.version }}</h3>
                            <span>更新于 {{ info.date }}</span>
                        </div>
                        <div class="info-content">
                            <ul>
                                <li
                                    v-for="(content, i) in info.content"
                                    :data-index="`【${(i+1)}】、`"
                                >{{ content.des }}</li>
                            </ul>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <!-- 信息统计 -->
            <div slot="footer" class="debug-footer">
                <p>Tips：若未及时更新或版本信息描述不清，请第一时间与开发人员联系。</p>
                <p>
                    <span>{{ title }}</span> 已进行
                    <span>{{ verCount }}</span>次的版本迭代，共解决
                    <span>{{ bugCount }}</span>个问题。
                </p>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: '',
    props: ['systemjs'],
    data () {
        return {
            isShowDevModal: false,
            transition: ['none', 'fade'],
            tabs: 'project',
            project: {},
            group: {},
            server: {}

        }
    },
    components: {},
    filters: {},
    watch: {

    },
    computed: {
        // 系统名称
        title () {
            let result = '';
            console.log(this.tabs);
            switch (this.tabs) {
                case 'project':
                    result = this.project.title;
                    break;

                case 'server':
                    result = this.server.title;
                    break;
            
                default:
                    result = '开发平台';
                    break;
            }
            return result;
        },
        // 版本信息总次数统计
        verCount () {
            let count = 0;
            let current = this[this.tabs];
            if (this[this.tabs].info instanceof Array) {
                count = current.info.length;
            }

            return count;
        },
        // 版本信息问题总数统计
        bugCount () {
            let count = 0;
            let current = this[this.tabs];
            if ( current.info instanceof Array ) {
                for (let i = 0; i < current.info.length; i++) {
                    let content = current.info[i].content.length;
                    count += content;
                }
            }
            return count;
        }
    },
    created () {
        this.onAddListenerDebug();
    },
    beforeMount () {
        // [前端版本信息]请求获取
        import(`@/assets/js/version/${this.systemjs}.js`).then(module => {
            this.project = module.default;
        });
        // [平台版本信息]请求获取
        import('@/assets/js/version/group.js').then(module => {
            this.group = module.default;
        });
        // [后端版本信息]请求获取
        // fetch(`config/version.js`)
        //     .then((response) => response.text())
        //     .then((data) => {
        //         if ( data.substring(0,20).indexOf('(function') > -1 ) {
        //             this.server = new Function(`return ${data}`)();
        //         }
        //     }).catch((error) => {
        //         console.log(error);
        //     })
    },
    mounted () {

    },
    methods: {
        onAddListenerDebug () {
            document.onkeydown = (e) => {
                const keyCode = e.keyCode || e.which || e.charCode;
                const ctrlKey = e.ctrlKey || e.metaKey;

                if (ctrlKey && keyCode == 13) {
                    // ctrl + Enter
                    this.isShowDevModal = true;
                }
            };
        },
        handleClick(tab, event){
            this.tab = tab.name;
            this.tabs = tab.name;
        }
    },
}
</script>

<style scoped>
.debug-bg {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: .11;
    background-image: url('~@/assets/images/debug-bg.png');
    background-repeat: no-repeat;
    background-position: center center; 
    background-size: 100%;
}
.el-tab-pane{
    max-height: 450px;
    overflow-y: auto;
}
.info-title {
    padding: 5px 0;
    border-bottom: 1px solid rgba(81, 90, 110, 0.3);
}
.info-title h3 {
    display: inline-block;
}
.info-title span {
    padding-right: 13px;
    float: right;
}
.info-item {
    margin: 0 0 20px 0;
}
.info-item:last-child {
    margin-bottom: 37px;
}
.info-content ul li {
    padding: 5px 0 5px 45px;
    list-style: decimal;
    position: relative;
}
.info-content ul li::before {
    content: attr(data-index);
    position: absolute;
    top: 5px;
    left: 0;
}
.info-updater {
    padding: 10px 0;
    font-size: 16px;
}
.info-updater span {
    display: block;
}
.debug-footer {
    font-size: 16px;
    line-height: 30px;
}
.debug-footer p:last-child {
    text-indent: 43px;
}
.debug-footer span {
    padding: 0 5px;
    font-weight: 550;
    color: #cf1313;
}
</style>
